<template>
  <div>
    <!--    面包屑导航  -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!--  表格展示用户列表  -->
      <el-table :data="cateList.result" border style="width: 20%" row-key="cat_id" :default-expand-all="false" :tree-props="{children: 'children', hasChildren: 'true'}">
        <el-table-column type="index" width="100" align="center">
        </el-table-column>
        <el-table-column prop="cat_name" label="类别" align="center">
        </el-table-column>
      </el-table>
      <!--分页管理-->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.pagenum"
          :page-sizes="[5,10,20,40]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        queryInfo:{
          query:'',
          pagenum:1,
          pagesize:5
        },
        cateList:[],
        total:0
      }
    },
    created () {
      this.getCateList()
    },
    methods: {
      async getCateList () {
        const { data : res } = await this.$http.get('categories',{ params : this.queryInfo})
        if(res.meta.status !== 200) return this.$message.error('获取商品分类列表失败')
        this.cateList = res.data
        this.total = res.data.total
      },
      //改变每页显示大小
      handleSizeChange (newSize) {
        this.queryInfo.pagesize = newSize
        this.getCateList()
        this.queryInfo.pagenum = 1
      },
      //监听页码值
      handleCurrentChange (newPage) {
        this.queryInfo.pagenum = newPage
        this.getCateList()
      },
    }
  }
</script>
<style></style>
